<template>
	<view>
		<TopHead :title="'我的项目'"></TopHead>
		<view class="tabbar-box">
			<view class="bar-item" :class="indxId==index?'barActive':''" v-for="(item,index) in barList" :key="index"
				@click="choose(item,index)">
				<text>{{item.title}}</text>
				<text></text>
			</view>
		</view>
		<view class="conbox">
			<view class="quanlist">
				<view class="popup-item" v-for="(item,index) in list" :key="index">
					<!-- <text class="tag">{{item.productEntity.name}}</text>
					<view class="numer" v-show="item.template.type==2"><text>￥</text>{{(item.template.templateInfo.reducePrice/100)||0}}</view>
					<view class="numer" v-show="item.template.type==1"><text>￥</text>{{(item.template.templateInfo.price/100)||0}}</view> -->
					<view class="numer">
						<image :src="path+item.productEntity.logo" class="item-img"></image>
					</view>
					<view class="popup-item-text" :class="item.status==2?'popup-item-text2':''">
						<view>{{item.productEntity.name}}</view>
						<view>使用时间：{{item.usedDate==undefined?"":item.usedDate}}</view>
						<view>有效期至：{{item.expirationDate==null?"长期有效":item.expirationDate}}</view>
					</view>
					<view class="syBtn"
						v-if="(item.status==1 || item.status==2) && (item.productEntity.useMethod==2 && item.specificationList[0].orderItemSpecificationValueList[0].value=='到店自取')"
						@click="showQRCode(item.id)">立即使用</view>
						<view class="syBtn"
						v-else-if="(item.status==1 || item.status==2) && item.productEntity.useMethod==4"
						@click="showQRCode(item.id)">立即使用</view>
					<view class="syBtn" v-else-if="item.status==1 && item.productEntity.useMethod!=4">未使用</view>
					<view class="syBtn" v-else-if="item.status==0">已过期</view>
					<view class="syBtn" v-else-if="item.status==2" @click="showDistribution(item)">已派单</view>
					<view class="syBtn" v-else-if="item.status==12">待发货</view>
					<view class="syBtn" v-else-if="item.status==13" @click="showExpressage(item)">待收货</view>
					<view class="syBtn syBtn1" v-else-if="item.status==3">已使用
						<text class="quan1"></text>
						<text class="quan2"></text>
						<text class="quan3"></text>
						<text class="quan4"></text>
					</view>
					<view class="syBtn" v-else>
						<image class="overdue-icon" src="../../static/images/overdue-icon.png"></image>
					</view>
				</view>
				<view class="wushuju" v-if="list.length<1">暂无数据</view>
			</view>
		</view>
		<uni-popup ref="popup" is-mask-click :mask-click="false">
			<view class="popupBox">
				<view class="popuptitle">
					<uni-icons type="closeempty" @click="close" class="closeempty" color="#040404"
						size="20"></uni-icons>
					我的核销码
				</view>
				<view class="formlist">
					<view class="iteminput">
						<image class="erCode" :src="qrcode"></image>
					</view>
				</view>
				<!-- 	<view class="bdBtn" @click="handData">绑定</view> -->
			</view>
		</uni-popup>

		<uni-popup ref="popupExpressage" is-mask-click :mask-click="false">
			<view class="popupBox2">
				<view class="popuptitle">
					<uni-icons type="closeempty" @click="closeExpressage" class="closeempty" color="#040404"
						size="20"></uni-icons>
				我的快递	
				</view>
				<view class="box1">
					<view class="left-box1">
						<view class="title1">商户已经发货</view>
						<view class="title1-text">请注意查收</view>
					</view>
					<view class="right-icon-box">

						<image class="fahuoSta" src="../../static/images/fahuo-icon.png"></image>
						<image v-if="infoData.status==3" class="fahuoSta" src="../../static/images/fahuo-icon2.png">
						</image>
						<image v-if="infoData.status==4" class="fahuoSta" src="../../static/images/fahuo-icon3.png">
						</image>
					</view>
				</view>

				<view class="formlist">
					<view class="iteminput">
						快递订单号: {{project.expressNumber}}
					</view>
				</view>
				<view class="btnBox">
					<view class="btn2" @click="handDelivery">收货</view>
				</view>
			</view>
		</uni-popup>
		
		
		<uni-popup ref="popupDistribution" is-mask-click :mask-click="false">
			<view class="popupBox2">
				<view class="popuptitle">
					<uni-icons type="closeempty" @click="closeDistribution" class="closeempty" color="#040404"
						size="20"></uni-icons>
					我的配送
				</view>
 
				<view class="formlist">
					<view class="iteminput">
						配送员:  {{distributionData.worker.realName}}
					</view>
					<view class="iteminput">
						电话: {{distributionData.worker.phone}}
					</view>

                       <view class="iteminput">
						开始时间: {{distributionData.startTime==undefined?"":distributionData.startTime}}
					</view>				
					<view class="iteminput">
						结束时间: {{distributionData.endTime==undefined?"":distributionData.endTime}}
					</view>		
					</view>
				<view class="btnBox">
					<view class="btn2" @click="handleCall">联系配送员</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import TopHead from '../../components/topHead/topHead.vue';
	export default {
		components: {
			TopHead
		},
		data() {
			return {
				path: this.$http.tpUrl + '/', // 图片前缀	
				barList: [{
						title: '全部',
						id: ''
					},
					{
						title: '未使用',
						id: '1'
					},
					{
						title: '已使用',
						id: '3'
					},


				],
				qrcode: "",
				indxId: 0, // 
				cocupponList: [{
						title: '满100使用（仅限一次）',
						id: 1,
						sta: 1,
						time: '2024.03.28 23:59:29'
					},
					{
						title: '满100使用（仅限一次）',
						id: 2,
						sta: 2,
						time: '2024.03.28 23:59:29'
					},
					{
						title: '满100使用（仅限一次）',
						id: 3,
						sta: 3,
						time: '2024.03.28 23:59:29'
					},
				],
				list: [], // 列表
				page: 1,
				pageSize: 10, // 
				total: 0, // 总数
				status: '', // 筛选卡券
				project: {},distributionData:{}
			}
		},
		onLoad() {

		},
		onShow() {
			this.page = 1
			this.total = 0
			this.list = []
			this.initData()

		},
		onReachBottom() {
			// 触底分页
			console.log('触底')
			if (this.total > this.list.length) {
				this.page = parseInt(this.page) + 1
				this.initData()
			}
		},
		methods: {

			open() {
				this.$refs.popup.open('center')
			},
			close() {
				this.$refs.popup.close()
			},
			openExpressage() {
				this.$refs.popupExpressage.open('center')
			},
			closeExpressage() {
				this.$refs.popupExpressage.close()
			},
			openDistribution() {
				this.$refs.popupDistribution.open('center')
			},
			closeDistribution() {
				this.$refs.popupDistribution.close()
			},
			
			// 数据请求示例
			initData() {
				let _this = this;
				let userId = uni.getStorageSync('id')
				let data = {
					status: _this.status,
					page: _this.page,
					pageSize: _this.pageSize,
					userId: userId
				}
				_this.$http.fetchData({
					url: '/wechatApplet/custoemr/project/',
					method: 'GET',
					data: data,
					success(res) {
						console.log("res", res);
						if (res.code != 200) {

							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
							return;
						}
						_this.list = [..._this.list,...res.data.list]
						_this.total = res.data.total
						console.log("list==>", _this.list);

					}
				})
			},
				
			handleCall(){
				console.log(this.distributionData.worker.phone);
				var phone=this.distributionData.worker.phone;
			uni.makePhoneCall({
			    phoneNumber: phone //仅为示例
			});
			},
			//显示配送
			showDistribution(item){
				console.log(item);
				if(item.productEntity.useMethod!=2){
					return;
				}
				var _this=this;
				var data={objId:item.id,taskType:1}
				var id = this.project.id;
				var _this = this;
				_this.$http.fetchData({
					url: '/wechatApplet/custoemr/project/jobTaskInfo',
					method: 'GET',
					data: data,
					success(res) {
						if (res.code != 200) {
							uni.showToast({
								title: res.message,
								icon: 'none'
							});
							return;
						}
						console.log("res==>",res.data)
						_this.distributionData=res.data;
						 
					}
				})
				
				
					this.openDistribution();
			},
			// 显示核销二维码
			showQRCode(id) {
				console.log(id)
				this.qrcode = this.$http.baseUrl + "/wechatApplet/custoemr/project/qrcode/" + id;
				console.log("	this.qrcode", this.qrcode);
				this.open();
			},
			//	显示物流信息
			showExpressage(item) {
				console.log(item);
				this.openExpressage();
				this.project = item;


				// uni.navigateToMiniProgram({
				// 	appId: "wx6885acbedba59c14",
				// 	path: "pages/result/result?nu=777222216018381&com=&querysource=207272E13C49C87F952298B839B6E4F4",
				// 	envVersion: 'trial',
				// 	extraData: {

				// 	},
				// 	success(res) {
				// 		// 打开成功
				// 		console.log('打开成功')
				// 	}
				// })
			},
			//收货
			handDelivery() {
				var id = this.project.id;
				var _this = this;
				_this.$http.fetchData({
					url: '/wechatApplet/custoemr/project/' + id,
					method: 'PUT',
					data: {},
					success(res) {
						if (res.code != 200) {
							uni.showToast({
								title: res.message,
								icon: 'none'
							});
							return;
						}
						_this.$refs.popupExpressage.close();
					}
				})
			},
			// 去付款
			goPay(item) {
				console.log(item)
			},
			choose(item, index) {
				console.log(item)
				this.indxId = index
				this.status = item.id 
				this.page = 1
				this.total = 0
				this.list = []
				this.initData()
			},


		}
	}
</script>

<style scoped>
	.headBox {
		font-size: 36rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		text-align: center;
		color: #232323;
		padding-top: 88rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-bottom: 112rpx;
		background: linear-gradient(89deg, #f9d7a6 1%, #ffdc95 100%);
	}

	.headBox .wzText {
		line-height: 56rpx;
	}

	.tabbar-box {
		padding: 30rpx;
		background: #f3f3f3;
		position: fixed;
		display: flex;
		top: 173rpx;
		left: 0;
		right: 0;
		z-index: 99;
	}

	.bar-item {
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #000000;
		flex: 1;
		margin-right: 34rpx;
		text-align: center;
	}

	.tabbar-box .bar-item:last-child {
		margin-right: 0;
	}

	.bar-item>text:nth-child(1) {}

	.bar-item>text:nth-child(2) {
		width: 35%;
		height: 8rpx;
		display: block;
		margin: 0 auto;
		margin-top: 9rpx;
	}

	.tabbar-box .barActive {
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		color: #e47917;
	}

	.tabbar-box .barActive>text:last-child {
		background: #e47917;
		border-radius: 4rpx;
	}

	.conbox {
		padding: 30rpx;
		padding-top: 290rpx;

	}

	.quanlist {
		padding: 30rpx 5rpx;
		/* height: 590rpx;
		overflow-y: auto; */
	}

	.popup-item {
		background: #fffbf3;
		border-radius: 10rpx;
		box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(93, 69, 41, 0.25);
		padding-left: 170rpx;
		position: relative;
		margin-bottom: 18rpx;
		display: flex;
	}

	.popup-item .tag {
		display: inline-block;
		background: #ffe6d1;
		border-radius: 10rpx 0rpx 10rpx 0rpx;
		padding: 0 16rpx;
		line-height: 42rpx;
		text-align: center;
		font-size: 24rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #e67817;
		position: absolute;
		top: 0;
		left: 0;
	}

	.popup-item .numer {
		font-size: 48rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		color: #f61111;
		position: absolute;
		left: 30rpx;
		width: 120rpx;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.popup-item .numer text {
		font-size: 28rpx;
	}

	.popup-item .popup-item-text {
		font-size: 24rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #e67817;
		flex: 1;
		padding-top: 47rpx;
		padding-bottom: 36rpx;
	 

	}

	.popup-item .popup-item-text2 {
		border-right: 2rpx dashed #e67817;
	}

	.popup-item .popup-item-text>view:first-child {
		margin-bottom: 14rpx;
	}

	.popup-item .syBtn {
		width: 160rpx;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #e67817;
		position: relative;
		z-index: 3;
	}

	.popup-item .syBtn1 {
		font-size: 24rpx;
		transform: rotate(-30deg);
	}

	.quan1 {
		width: 68rpx;
		height: 68rpx;
		border: 2rpx solid #e47917;
		border-radius: 50%;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -34rpx;
		margin-left: -34rpx;
		display: block;
		box-sizing: border-box;
	}

	.quan2 {
		width: 88rpx;
		height: 88rpx;
		border: 2rpx solid #e47917;
		border-radius: 50%;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -44rpx;
		margin-left: -44rpx;
		display: block;
		box-sizing: border-box;
	}

	.quan3 {
		width: 96rpx;
		height: 96rpx;
		border: 2rpx solid #e47917;
		border-radius: 50%;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -48rpx;
		margin-left: -48rpx;
		display: block;
		box-sizing: border-box;
	}

	.quan4 {
		width: 116rpx;
		height: 46rpx;
		background: #ffe6d1;
		border-radius: 5rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -23rpx;
		margin-left: -58rpx;
		z-index: -1;
	}

	.overdue-icon {
		width: 132rpx;
		height: 100rpx;
	}

	.wushuju {
		text-align: center;
		font-size: 26rpx;
		margin-top: 60rpx;
		color: #999;
	}

	.item-img {
		flex-shrink: 0;
		width: 120rpx;
		height: 120rpx;
		border-radius: 10rpx;
		background-color: #f3f3f3;
	}

	.formlist {
		padding: 0 52rpx;
	}

	.iteminput {
		/* padding-top: 74rpx;
		padding-bottom: 81rpx; */
		border-bottom: 2rpx solid rgba(94, 94, 94, 0.1);
	}

	.iteminput .erCode {
		width: 580rpx;
		height: 580rpx;
		display: block;
		margin: 0 auto;
		margin-top: 30rpx;
		border-radius: 10rpx;
	}

	.popupBox {
		width: 690rpx;
		height: 700rpx;
		background: #ffffff;
		border-radius: 20rpx;
		padding-top: 34rpx;
		background-color: #e5e5e5;
	}
	.popupBox2 {
		width: 690rpx;
		/* height: 700rpx; */
		background: #ffffff;
		border-radius: 20rpx;
		padding-top: 34rpx;
		background-color: #e5e5e5;
		padding-bottom: 30rpx;
	}

	.popuptitle {
		position: relative;
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		text-align: center;
		color: #5d4529;

	}

	.closeempty {
		position: absolute;
		left: 30rpx;
		top: 50%;
		margin-top: -20rpx;
	}

	.box1 {
		display: flex;
		margin: 40rpx;
	}

	.box1 .left-box1 {
		flex: 1;
	}

	.title1 {
		font-size: 32rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		color: #5d4529;
	}

	.title1-text {
		font-size: 24rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #c2c2c2;
		margin-top: 16rpx;
	}

	.box1 .right-icon-box {
		width: 158rpx;
		height: 124rpx;
		margin-right: 65rpx;
	}

	.box1 .right-icon-box .fahuoSta {
		width: 158rpx;
		height: 124rpx;
	}

	.btnBox {
		text-align: center;
		line-height: 78rpx;


	}

	.btnBox>view {
		width: 216rpx;
		display: inline-block;
		text-align: center;
		margin-right: 20rpx;
	}

	.btnBox>view:last-child {
		margin-right: 0;
	}

	.btnBox .btn1 {
		background: #e9e9e9;
		border-radius: 10rpx;
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #404040;
	}

	.btnBox .btn2 {
		background: #e47917;
		border-radius: 10rpx;
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #ffffff;
		margin-top: 30rpx;
	}
</style>